<template>
  <div id="inq">
    <van-tabs v-model="active" @click="stayle">
      <van-tab :title="titlesta">
        <van-popup v-model="showsta" position="top">
          <van-picker show-toolbar :columns="colum" @confirm="surefirm" type="string" />
        </van-popup>
      </van-tab>
      <van-tab :title="titleStatus">
        <van-popup v-model="showStatus" position="top">
          <van-picker show-toolbar :columns="columStatus" @confirm="surefirmStatus" type="string" />
        </van-popup>
      </van-tab>
      <van-tab :title="titletime">
        <van-popup v-model="showstime" position="top">
          <van-datetime-picker v-model="currentBeginDate" type="date" @confirm="suretime" />
        </van-popup>
      </van-tab>
      <van-tab :title="endtitletime">
        <van-popup v-model="endstime" position="top">
          <van-datetime-picker v-model="currentEndDate" type="date" @confirm="endtime" />
        </van-popup>
      </van-tab>
    </van-tabs>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="state" v-if="list.length>0">
        <div v-for="(row,i) in list" :key="i" class="dataShow" style="margin-bottom:20px;height:auto;float:left;">
          <div style="font-size:2vh;  text-align:center;height:3em;font-weight:700;line-height:3em;width:100%;background:#C7E1FC;">{{row.state==0?"产品表":row.state==1?"资格表":"配件表"}}</div>
          <div style=" position:relative; widht:100%;height:auto; padding-left:30px;padding-right:30px">
            <div style="width:100%;float:left;">
              <p style="margin-top:20px;font-size:1.2em; float:left;width:50%;">
                <span class="payment">客户名称：</span>
                <span class="payment">{{row.customername}}</span>
              </p>

              <p v-if="row.state!=1" style="margin-top:20px;font-size:1.2em; float:left;width:50%;">
                <span class="payment">产品名称：</span>
                <span class="payment">{{row.name}}</span>
              </p>
              <p v-if="row.state==1" style="margin-top:20px;float:left;width:50%;">
                <span class="payment">客户角色：</span>
                <span class="payment">{{row.rolename}}</span>
              </p>
            </div>
            <div style="width:100%;float:left;">
              <p v-if="row.state!=1" style="margin-top:10px;font-size:1.2em; float:left;width:50%;">
                <span class="payment">市场价：</span>
                <span>{{row.money}}/元</span>
              </p>

              <p v-if="row.state!=1" style="margin-top:10px;font-size:1em; float:left;width:50%;">
                <span class="payment">已收定金：</span>
                <span class="payment">{{row.moneyDeposit}}/元</span>
              </p>
            </div>
            <div style="width:100%;float:left;">
              <p v-if="row.state!=1" style="margin-top:10px;font-size:1.2em; float:left;width:50%;">
                <span class="payment">尾款：</span>
                <span class="payment">{{row.moneyBalance}}/元</span>
              </p>
              <p v-if="row.state!=1" style="margin-top:10px;font-size:1.2em; float:left;width:50%;text-align:left;">
                <span class="payment">总金额：</span>
                <span class="payment">{{row.moneyTotal}}/元</span>
              </p>
            </div>
            <div style="width:100%;float:left;">
              <p v-if="row.state !=1" style="margin-top:10px;font-size:1em; float:left;width:50%;">
                <span class="payment">发货状态：</span>
                <span class="payment">{{row.stauts==0?'发货':'自提'}}</span>
              </p>
              <p v-if="row.state!=1" style="margin-top:10px;font-size:1.2em; float:left;width:50%;text-align:left;">
                <span>数量：</span>
                <span class="payment">{{row.num}}/件</span>
              </p>
            </div>
            <div style="width:100%;float:left;">
              <p v-if="row.state ==1" style="margin-top:10px;font-size:1em; float:left;width:50%;">
                <span class="payment">费用：</span>
                <span class="payment">{{row.moneyTotal}}/元</span>
              </p>
              <p style="margin-top:10px;float:left;font-size:10px;width:50%;">
                <span class="payment">出库时间</span>
                <span class="payment">{{row.beginTime.substring(0,10)}}</span>
              </p>

              <p style="margin-top:10px;font-size:10px;float:left;">
                <span class="payment">状态：</span>
                <span :class="row.deliveryresult==0 ? 'red' : ' green'">{{row.deliveryresult==0?'未完成':'已完成'}}</span>
              </p>
            </div>
            <div style="height:1.2em;width:100%;float:left;"></div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
  import {
    recheck,
    dicItems
  } from '@/api/api';
  import logo_default from '@/assets/images/logo.jpg';
  import bjtu from '@/assets/images/BJtrue.jpg';
  import {
    getLocalStorage,
    setLOcalStorage
  } from '@/utils/local-storage';
  import {
    field,
    Tab,
    Tabs,
    DatetimePicker,
    Search,
    Row,
    Col,
    DropdownMenu,
    DropdownItem,
    List,
    Uploader,
    Popup,
    Area,
    Divider,
    PullRefresh,
    Toast,
    Tag
  } from 'vant';

  export default {
    name: 'inquer',
    data() {
      return {
        active: 0,
        userId: Number(getLocalStorage('userId').userId),
        loading: false,
        list: '',
        userId: '',
        currentEndDate: new Date(),
        currentBeginDate: new Date(),
        endtitletime: '结束时间',
        titlesta: '全部',
        titleStatus: '状态选择',
        titletime: '开始时间',
        showstime: false,
        showsta: false,
        showStatus: false,
        endstime: false,
        colum: ['资格表', '配件表', '产品表'],
        columStatus: ['未完成', '已完成'],
        finished: false,
        logo_default: logo_default,
        isLoading: true,
        page: 1
      };
    },
    created() {
      this.searchTitletime();
    },
    methods: {
      stayle(name, title) {
        // alert(name);
        if (name == 0) {
          this.showsta = true;
        } else if (name == 1) {
          this.showStatus = true;
        } else if (name == 2) {
          this.showstime = true;
        } else {
          this.endstime = true;
        }
      },
      surefirm(value, i) {
        this.titlesta = value;

        this.showsta = false;
        this.searchTitletime();
        return;
      },
      surefirmStatus(value, i) {
        this.titleStatus = value;
        this.showStatus = false;
        this.searchTitletime();
        return;
      },
      suretime(v, i) {
        this.titletime = this.dateFormat('YYYY-mm-dd', v);
        this.showstime = false;
        this.searchTitletime();
        return;
      },
      endtime(v, i) {
        this.endtitletime = this.dateFormat('YYYY-mm-dd', v);
        this.endstime = false;
        this.searchTitletime();
        return;
      },
      onRefresh() {
        setTimeout(() => {
          this.page++;
          this.searchTitletime();
          Toast('刷新成功');
          this.isLoading = false;
        }, 1000);
      },
      searchTitletime() {
        if (
          (this.endtitletime != '结束时间' && this.titletime == '开始时间') ||(this.endtitletime == '结束时间' && this.titletime != '开始时间')
        ) {
          return;
        }
        recheck({
          page: this.page,
          limit: 10,
          userId: Number(getLocalStorage('userId').userId),
          state: this.titlesta == '产品表' ?
            0 : this.titlesta == '资格表' ?
            1 : this.titlesta == '配件表' ?
            2 : null,
          beginTime: this.endtitletime != '结束时间' ?
            this.dateFormat('YYYY-mm-dd 00:00:00', this.currentEndDate) : null,
          endTime: this.titletime != '开始时间' ?
            this.dateFormat('YYYY-mm-dd 00:00:00', this.currentBeginDate) : null,
          deliveryresult: (this.titleStatus=='未完成' || this.titleStatus=='已完成')? (this.titleStatus=='已完成'?1:0) : undefined
        }).then(res => {
          console.log(this.userId);
          this.list = res.data.data.list;
        });
      },
      dateFormat(fmt, date) {
        let ret;
        const opt = {
          'Y+': date.getFullYear().toString(), // 年
          'm+': (date.getMonth() + 1).toString(), // 月
          'd+': date.getDate().toString(), // 日
          'H+': date.getHours().toString(), // 时
          'M+': date.getMinutes().toString(), // 分
          'S+': date.getSeconds().toString() // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
          ret = new RegExp('(' + k + ')').exec(fmt);
          if (ret) {
            fmt = fmt.replace(
              ret[1],
              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
            );
          }
        }
        return fmt;
      }
    },

    components: {
      [field.name]: field,
      [Popup.name]: Popup,
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      [DatetimePicker.name]: DatetimePicker,
      [Search.name]: Search,
      [Row.name]: Row,
      [Col.name]: Col,
      [List.name]: List,
      [Area.name]: Area,
      [Tag.name]: Tag,
      [Divider.name]: Divider,
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
      [PullRefresh.name]: PullRefresh,
      [Toast.name]: Toast
    }
  };

</script>

<style lang="scss" scoped>
  // @import'@/assets/images/BJtrue.jpg';
  * {
    padding: 0;
    margin: 0;
  }

  .showsta {
    float: left;
    width: 50%;
    height: auto;
  }

  .state {
    font-family: '华文细黑';
    float: left;
  }

  .dataShow {
    width: 100%;
    height: 11em;
    font-size: 1.7vh;
    // padding:2%;
    // margin:9%;

    // margin:0 !important;
    box-shadow: 1px 1px 10px rgb(214, 210, 210);
  }

  .payment {
    font-size: 2.2vh;
  }

  .green {
    color: green;
    font-size: 2.2vh;
  }

  .red {
    color: red;
    font-size: 2.2vh;
  }

</style>
